<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户数据列表</title>
    <!--    引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入element ui-->
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <!--  引入axios   -->
    <script type="text/javascript" src="js/axios.min.js"></script>


</head>
<body>
<div id="app">
    <div>
        <el-table
                :data="datalist"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="update(scope.row)" plain>修改</el-button>
                    <el-button type="success" @click="delRow(scope.row)" plain>删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>


    <div>
        <el-dialog
                title="修改编辑框"
                :visible.sync="dialogVisible"
                width="30%">

            <el-form ref="form" :model="formData" label-width="80px">

                <el-form-item label="姓名">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>

                <el-form-item label="年龄">
                    <el-input v-model="formData.age"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formData.password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click=" dialogVisible =!dialogVisible">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>


</div>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                datalist: [],
                //表单数据
                formData: {},
                // 编辑框状态
                dialogVisible: false
            }
        },
        //页面创建完成自动调用
        created() {
            //调用获取数据列表的方法
            this.getAll()
        },
        methods: {
            //获取所有的数据
            getAll() {
                axios.get("http://localhost:8080/test?m=findAll").then(res => {
                    //log
                    //属性赋值 将返回的结果赋值给变量
                    this.datalist = res.data
                    console.log("后端返回的数据: ", this.datalist)
                })
            },
            //修改方法
            update(row) {
                console.log("修改方法调用: ", row)
                this.formData = row
                this.dialogVisible = true

            },
            //删除方法
            delRow(row) {
                console.log("删除方法调用")
            },
            //提交请求
            async onSubmit() {
                console.log("表单提交:  ", this.formData)
                await axios.post("http://localhost:8080/test?m=updateById", this.formData).then(res => {
                    console.log(res)
                    if (res.data.code ===200){
                        this.$message(res.data.msg);
                    }

                })
                //关闭弹出层
                this.dialogVisible = false
                //刷新数据
                this.getAll()
            },
            addForm() {
                // axios.post("http://localhost:8080/test?")
            }

        }
    })


</script>
</body>
</html>